<template>
	<view>
		<image class="background-image" :style="{ width: windowWidth + 'rpx', height: windowHeight + 'rpx' }" mode="aspectFill" :src="backgroundImage"></image>
		<swiper v-if="info.length > 0" class="swiper-box" circular @change="swiperChange" :style="{ transform: `scale(${scale})`, left: getLeft + 'rpx' }">
			<swiper-item class="swiper-item" v-for="(item, index) in info" :key="index">
				<view class="swiperTip">
					左右滑动更换海报样式,
					长按图片保存到手机相册
				</view>
				<slot name="image">
					<image @longpress="savePoster(info, index)" class="item-img" :src="item.imgUrl" mode="aspectFit"></image>
					<image :src="userInfo.avatar" mode="aspectFill" :style="getAvatarStyle" style="position: absolute;border-radius: 50%;"></image>
					<view :style="getNameStyle" style="position: absolute;">我是{{ userInfo.nickName }}</view>
					<image :src="code" mode="aspectFit" :style="getQRCodeStyle" style="position: absolute;"></image>
				</slot>
			</swiper-item>
		</swiper>
		<loading ref="loading"></loading>
		
		<canvas class="canvas" canvas-id="newCanvas" :style="{ width: `${width}px`, height: `${height}px` }"></canvas>
	</view>
</template>
<script>
import http from '@/common/request.js';
import { mapState } from 'vuex';
import Loading from '../notice/loading.vue';
import poster from './poster.js';
export default {
	components: {
		Loading
	},
	mixins: [poster],
	props: {
		info: {
			type: Array,
			default() {
				return [];
			}
		}
	},
	computed: {
		...mapState({
			userInfo: state => state.userInfo
		}),
		getAvatarStyle() {
			const {
				avatarWidth,
				avatarHeight,
				avatarLeft: left,
				avatarTop: top
			} = this.info[this.currentIndex] || {};

			return this.getStyle({
				width: avatarWidth || 510,
				height: avatarHeight || 510,
				left,
				top
			});
		},
		getNameStyle() {
			const {
				nickNameLeft: left,
				nickNameTop: top,
				nickNameColor: color
			} = this.info[this.currentIndex] || {};

			return this.getStyle({
				'font-size': 104,
				left,
				top,
				color
			});
		},
		getQRCodeStyle() {
			const {
				qrcodeWidth,
				qrcodeHeight,
				qrcodeLeft: left,
				qrcodeTop: top
			} = this.info[this.currentIndex] || {};

			return this.getStyle({
				width: qrcodeWidth || 510,
				height: qrcodeHeight || 510,
				left,
				top
			});
		},
		getLeft() {
			return (this.windowWidth - this.width * this.scale) / 2;
		}
	},
	data() {
		const sysInfo = uni.getSystemInfoSync(),
			ratio = 750 / sysInfo.windowWidth,
			height = 4612,
			index = 0;

		return {
			scale: (ratio * sysInfo.windowHeight - 20) / height,
			ratio,
			code: '',
			currentIndex: index,
			width: 2131,
			height,
			windowHeight: sysInfo.windowHeight * ratio,
			windowWidth: sysInfo.windowWidth * ratio,
			backgroundImage: ''
		};
	},
	watch: {
		info: {
			handler(val) {
				if (val) {
					this.backgroundImage = val[this.currentIndex].imgUrl;
				}
			},
			deep: true
		}
	},
	created() {
		http('/api/sysSharePosterInfo/getQrCode', {
			method: 'GET'
		}).then(res => {
			this.code = res.msg;
		});
	},
	methods: {
		getStyle(obj) {
			const result = [],
				reg = ['width', 'height', 'font-size', 'left', 'top'];
			for (let key in obj) {
				const value = obj[key];
				if (reg.includes(key)) {
					result.push(key + ':' + value + 'rpx');
				} else {
					result.push(key + ':' + value);
				}
			}
			return result.join(';');
		},
		swiperChange(e) {
			this.dontFirstAnimation = false;
			this.currentIndex = e.detail.current;
			setTimeout(r => {
				this.backgroundImage = this.info[this.currentIndex].imgUrl;
			}, 500);
		},
		savePoster(info, index) {
			const { width, height, code } = this;
			const item = info[index];
			const background = item.imgUrl;
			const avatar = this.userInfo.avatar;
			const name = this.userInfo.nickName;
			const color = item.nickNameColor;
			this.createPoster({
				background: {
					url: background,
					width,
					height,
					left: 0,
					top: 0
				},
				avatar: {
					width: item.avatarWidth || 510,
					height: item.avatarHeight || 510,
					left: item.avatarLeft,
					top: item.avatarTop,
					url: avatar
				},
				name: {
					left: item.nickNameLeft,
					top: item.nickNameTop,
					text: name,
					fontSize: item.nickNameFontSize,
					color
				},
				qrCode: { width: item.qrcodeWidth || 510, height: item.qrcodeHeight || 510, left: item.qrcodeLeft, top: item.qrcodeTop, url: code }
			});
		}
	}
};
</script>
<style scoped lang="less">
.background-image {
	position: absolute;
	z-index: 0;
	filter: blur(12rpx);
}

.swiper-box {
	width: 2131rpx;
	height: 4612rpx;
	position: relative;
	box-shadow: 0px 4px 20px 0px rgba(102, 100, 93, 0.2);
	border-radius: 20px;
	display: inline-block;
	transform-origin: top left;
	z-index: 1;

	.swiper-item {
		width: 2131rpx;
		height: 4612rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		.item-img {
			width: 2131rpx;
			height: 4612rpx;
			border-radius: 20rpx;
			overflow: hidden;
		}
	}
}

.canvas {
	position: fixed;
	left: -10000px;
}
.swiperTip {
	position: absolute;
	z-index: 99;
	font-size: 70rpx;
	transform: scale(1.2);
	color: #636363;
	background: rgba(250, 204, 107, 0.5);
	text-align: center;
	font-weight: 200;
	padding: 40rpx 0;
	width: 100%;
	top: 0rpx;
}
</style>
